<template>
<div>
  <pre lang="json">{{ userInfo }}</pre>
  <div v-text="history"></div>
  <button @click="addHobby">添加爱好</button>
  <button @click="undo">撤销</button>
  <button @click="redo">重做</button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useDebouncedRefHistory } from '@vueuse/core';

const userInfo = ref({
  userId: 1243,
  hobbies: ['篮球', '足球', '游泳']
})
const { history, undo, redo } = useDebouncedRefHistory(userInfo, { deep: true, debounce: 1000 })

const addHobby = () => userInfo.value.hobbies.push('hobby_' + userInfo.value.hobbies.length)
</script>